import React from 'react';
import { useTranslation } from 'react-i18next';
import { Empty, MainColorType } from '@nova-hf/ui';
import { useRouter } from 'next/router';
import { useRefillHistoryBetaQuery, useServiceQuery } from 'typings/graphql';

import { RefillList } from '../components/RefillList';
import { RefillListItem } from '../components/RefillListItem';
import { RefillListItemLoading } from '../components/RefillListItemLoading';

type RefillHistoryReportProps = {
  color?: MainColorType;
};

const RefillHistoryReport = ({ color }: RefillHistoryReportProps) => {
  const router = useRouter();
  const { t } = useTranslation('refill');

  const serviceId = (router.query.serviceId as string) ?? '';

  const {
    data: serviceData,
    loading: serviceLoading,
    error: serviceError,
  } = useServiceQuery({
    variables: {
      serviceId: serviceId,
    },
  });
  const service = serviceData?.service.__typename === 'MobileService' ? serviceData.service : null;

  const { data, loading, error } = useRefillHistoryBetaQuery({
    variables: {
      input: {
        subscriptionId: service?.phoneNumber ?? '',
      },
    },
    skip: !service?.phoneNumber,
  });
  const refillHistory = data?.subscription?.refills?.refillHistory;

  const headers = {
    date: t('date'),
    refill: t('refill'),
    type: t('type'),
    amount: t('amount'),
  };

  if (loading || serviceLoading) {
    return (
      <RefillList headers={headers}>
        <RefillListItemLoading />
        <RefillListItemLoading />
        <RefillListItemLoading />
        <RefillListItemLoading />
        <RefillListItemLoading />
      </RefillList>
    );
  }
  if (!data || error || serviceError) {
    return <Empty icon="search" title={t('noHistory')} subtitle={t('noHistoryMessage')} />;
  }

  return (
    <RefillList headers={headers}>
      {refillHistory &&
        refillHistory.map((item, i) => {
          return item ? <RefillListItem key={`item-${i}`} color={color} item={item} /> : null;
        })}
    </RefillList>
  );
};
export default RefillHistoryReport;